import styled from "styled-components";

import download from "@/assets/img/download.png";
import arrowl from "@/assets/img/arrl.png";
import arrl_hvr from "@/assets/img/arrl_hvr.png";
import arrowr from "@/assets/img/arrr.png";
import arrr_hvr from "@/assets/img/arrr_hvr.png";
import radio_slide from "@/assets/img/radio_slide.png";

export const BannerWrapper = styled.div`
  background: url(${props => props.bgImage}) center center/6000px;

  .banner {
    display: flex;
    position: relative;
    height: 270px;
  }

  .dots {
    button {
      width: 20px;
      height: 20px;
      background: url(${radio_slide});
      background-position: left top;
    }
  }
`;

export const BannerLeft = styled.div`
  width: 730px;

  .img-item {
    width: 730px;
  }
`;

export const BannerRight = styled.div`
  position: relative;
  width: 254px;
  background: url(${download});

  .tips {
    width: 100%;
    position: absolute;
    text-align: center;
    bottom: 5px;
    color: #8d8d8d;
  }

  .download {
    position: absolute;
    display: block;
    width: 215px;
    height: 56px;
    text-indent: -9999px;
    top: 185px;
    left: 50%;
    transform: translateX(-50%);
  }
`;

export const BannerControls = styled.div`
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);

  .btn {
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -31px;
    width: 37px;
    height: 63px;
    cursor: pointer;
  }

  .left {
    background: url(${arrowl});
    left: -58px;
    &:hover {
      background: url(${arrl_hvr});
    }
  }

  .right {
    background: url(${arrowr});
    right: -58px;
    &:hover {
      background: url(${arrr_hvr});
    }
  }
`;
